// vue 类
class Vue {
    /*
        1. 通过属性保存数据
        2. 将data中的数据转换为getter, setter，注入到vue实例中
        3. 调用Observer, 监听data中的属性(响应式)
        4. 调用compiler 解析指令和差值表达式
    */
    constructor(options) {
        // $options 保存 传入的options
        this.$options = options || {}
        // 保存 data
        this.$data = this.$options.data || {}
        // $el 绑定根元素
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        
        // 将data中的数据转换为getter, setter，注入到vue实例中
        this._proxyData(this.$data)
        //  调用Observer, 监听data中的属性(响应式)
        new Observer(this.$data)
        new Compiler(this)
    }
    _proxyData(data) {
        Object.keys(data).forEach(key => {
            // 这里的this是vue实例
            Object.defineProperty(this, key, {
                configurable: true,
                enumerable: true,
                get() {
                    return data[key]
                },
                set(newValue) {
                    if(newValue === data[key]) {
                        return
                    }
                    data[key] = newValue
                }
            })
        })
    }
}